import React, { useEffect, useState } from 'react';
import { View, Text } from '@ray-js/ray';
import { Switch, Slider } from '@ray-js/smart-ui';
import Styles from './index.module.less';
import { useActions, useProps } from '@ray-js/panel-sdk';
import { getBitAt, getCircleIndex, getColorValue, getSliderValue, setBitAt, setColorByteInHex, setSliderInHex } from '@/utils';
import CircleProgresView from '@/components/MyCircleProgressView';
//10,11
export function LutangFenweiView() {
  const byteFirstInex = 10; //控制开关和颜色的byte位置
  const byteSecIndex = 11;//控制亮度的byte位置
  const actions = useActions();
  const myFlameSet = useProps(props => props.Flame_Set);//104

  const centerSwitch = getBitAt(myFlameSet, byteFirstInex) == 1;

  const values = [25, 75];
  const colorValue = getColorValue(myFlameSet, byteFirstInex);
  const [sliderValue, setSliderValue] = useState(() => {
    return getSliderValue(myFlameSet, byteSecIndex);
  });
  const [sliderTextValue, setSliderTextValue] = useState(() => {//进度条文字的进度
    return getSliderValue(myFlameSet, byteSecIndex);
  });

  const value = getCurrentValue();
  console.log('myFlameSet:', myFlameSet);
  console.log('centerSwitch:', centerSwitch);
  console.log('颜色值:', colorValue);
  console.log('滑动条的值:', sliderValue);
  console.log('颜色值-进度点具体值:', value);
  useEffect(() => {
    const progress = getSliderValue(myFlameSet, byteSecIndex);
    setSliderValue(progress)
    console.log('myFlameSet变更:', myFlameSet);
    setSliderTextValue(progress);
  }, [myFlameSet]);
  function getCurrentValue(): number {
    if (colorValue <= 2 && colorValue >= 1) {
      return values[colorValue - 1];
    }
    return 0;
  }
  const handleEnd = (v: number) => {
    console.warn('handleEnd', v);
    let end = getCircleIndex(values, v); //返回的是1-9的索引值    也是我需要设置的值
    const str = setColorByteInHex(myFlameSet, byteFirstInex, end);
    console.log('最终点位-end' + end + ',移动点是v:' + v + ',str:' + str);
    // setValue(values[end-1]);
    actions.Flame_Set.set(str);
  };


  function updateSliderValue(value: number) {
    console.log('updateSliderValue-value:' + value);
    const str = setSliderInHex(myFlameSet, byteSecIndex, value);
    console.log('updateSliderValue-str:' + str);
    actions.Flame_Set.set(str);
  }

  return (
    <View className={Styles.container}>
      <View className={Styles.circleandtext}>
        <View
          style={{
            position: 'relative',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignContent: 'center',
            alignItems: 'center',
          }}
        >
          {/* 新增容器 */}
          <View className={Styles.switchWrapper}>
            <View className={Styles.circleContainer}>
              <CircleProgresView
                value={value}
                innerRingRadius={125}
                hideThumb={false}
                radius={145}
                colorType={5}
                onTouchEnd={handleEnd}
                renderInnerCircle={() => (
                  <View
                    className={Styles.circlecenter}
                    style={{
                      width: 160,
                      height: 160,
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}
                  />
                )}
              />
            </View>
            {/* 使用绝对定位放置 Switch */}
            <Switch
              customClass='circle-switch'
              checked={centerSwitch}
              activeColor="#DE3F12"
              inactiveColor="#ABABAB"
              onChange={event => {
                console.log('switch', `进行了点击:${event.detail}`);
                const str = setBitAt(myFlameSet, byteFirstInex, centerSwitch ? 0 : 1);
                console.log('switch-str-设置的指令', str);
                actions.Flame_Set.set(str);
              }}
            />
            <View
              className='circle-second-switch-view'
              style={{ opacity: 0 }}
            >
              <Text style={{ fontSize: '40', color: 'white', marginRight: '20rpx' }} />
              <Switch
                className='circle-second-switch' // 添加固定高度
                style={{
                  height: '25px',
                  justifyContent: 'center',
                  alignItems: 'center',
                  alignContent: 'center',
                }} // 添加固定高度
              />
            </View>
          </View>

          <View
            className='circle-slider-first-view'
          >
            <View
              className='circle-slider-second-view'
            >
              <Slider
                value={sliderValue}
                style={{ width: '100%', flex: 1, height: '64px', paddingTop: '32px' }}
                min={0}
                max={100}
                minTrackHeight="4px"
                maxTrackHeight="4px"
                thumbHeight="22px"
                thumbWidth="22px"
                onChange={value => setSliderTextValue(value)}
                onAfterChange={value => updateSliderValue(value)}
                trackStyle={{ backgroundColor: '#DE3F12', height: '3px' }} // 轨道样式
                barStyle={{ backgroundColor: '#DE3F12', height: '6px' }} // 滑条样式
              />
            </View>
            <View style={{ width: '8rpx' }} />
            <Text style={{ textAlign: 'right', color: 'white', fontSize: 30, width: '80rpx' }}>
              {sliderTextValue}%
            </Text>
          </View>
        </View>
      </View>
    </View>
  );
}
export default LutangFenweiView;
